<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>孕育宝典 - 文章详情</title>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
        <style>
            body {
                font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
                background-color: #f5f5f5;
                color: #333333;
                margin: 0;
                padding: 0;
            }
            .device-container {
                width: 390px;
                height: 844px;
                overflow: hidden;
                position: relative;
                background-color: white;
            }
            .status-bar {
                height: 44px;
                background-color: #ffffff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
                font-size: 14px;
                font-weight: 600;
            }
            .header {
                background-color: #ffffff;
                padding: 10px 16px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f5f5f5;
            }
            .nav-bar {
                height: 60px;
                background-color: #ffffff;
                position: absolute;
                bottom: 0;
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                border-top: 1px solid #f5f5f5;
            }
            .nav-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #666666;
                font-size: 10px;
            }
            .nav-item.active {
                color: #ff9fb5;
            }
            .main-content {
                height: calc(844px - 44px - 60px - 57px);
                overflow-y: auto;
                background-color: #ffffff;
            }
            .article-header {
                padding: 16px;
                border-bottom: 1px solid #f5f5f5;
            }
            .article-tag {
                display: inline-block;
                padding: 2px 8px;
                background-color: #ffd6e0;
                color: #ff6b8b;
                border-radius: 4px;
                font-size: 10px;
                margin-bottom: 8px;
            }
            .article-meta {
                display: flex;
                font-size: 12px;
                color: #999;
                margin-top: 12px;
            }
            .article-body {
                padding: 16px;
                font-size: 15px;
                line-height: 1.8;
                color: #333;
            }
            .article-image {
                width: 100%;
                border-radius: 8px;
                margin: 16px 0;
            }
            .article-section {
                margin-bottom: 24px;
            }
            .section-title {
                font-size: 18px;
                font-weight: 600;
                margin-bottom: 12px;
                color: #222;
            }
            .related-articles {
                padding: 16px;
                background-color: #f8f8f8;
                margin-top: 24px;
            }
            .related-title {
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 12px;
            }
            .related-card {
                display: flex;
                background-color: white;
                border-radius: 8px;
                overflow: hidden;
                margin-bottom: 12px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            }
            .related-image {
                width: 80px;
                height: 80px;
                object-fit: cover;
            }
            .related-content {
                flex: 1;
                padding: 10px;
            }
            .share-bar {
                position: fixed;
                bottom: 70px;
                left: 0;
                right: 0;
                display: flex;
                justify-content: space-around;
                padding: 12px;
                background-color: white;
                border-top: 1px solid #f5f5f5;
                z-index: 10;
            }
            .share-button {
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 10px;
                color: #666;
            }
            .share-icon {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background-color: #f5f5f5;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 4px;
                font-size: 16px;
            }
            .bookmark-icon {
                color: #ff9fb5;
            }
        </style>
    </head>
    <body>
        <div class="device-container">
            <!-- iOS状态栏 -->
            <div class="status-bar">
                <span>9:41</span>
                <div class="flex items-center">
                    <i class="fas fa-signal mr-1"></i>
                    <i class="fas fa-wifi mr-1"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>

            <!-- 页面头部 -->
            <div class="header">
                <div class="flex items-center">
                    <i class="fas fa-chevron-left mr-4"></i>
                    <h1 class="text-lg font-medium">文章详情</h1>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-share-alt"></i>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="main-content">
                <!-- 文章头部 -->
                <div class="article-header">
                    <div class="article-tag">营养建议</div>
                    <h1 class="text-xl font-bold">备孕期间最需要补充的7种营养素</h1>
                    <div class="article-meta">
                        <span class="mr-3">2023-10-15</span>
                        <span class="mr-3">阅读：2,534</span>
                        <span>作者：营养专家 王医生</span>
                    </div>
                </div>

                <!-- 文章内容 -->
                <div class="article-body">
                    <div class="article-section">
                        <p>
                            备孕期是为怀孕做准备的关键阶段，良好的营养状况不仅对成功受孕至关重要，还能为未来胎儿的健康发育奠定基础。本文将详细介绍备孕期间最需要补充的7种核心营养素。
                        </p>

                        <img
                            src="https://images.unsplash.com/photo-1490818387583-1baba5e638af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80"
                            alt="健康食品"
                            class="article-image"
                        />
                    </div>

                    <div class="article-section">
                        <h2 class="section-title">1. 叶酸(维生素B9)</h2>
                        <p>
                            叶酸是备孕期间最重要的营养素之一，它能有效预防胎儿神经管缺陷等先天性畸形。研究表明，孕前至少3个月开始补充叶酸，可将神经管缺陷的风险降低多达70%。
                        </p>
                        <p><strong>推荐摄入量：</strong>400-800微克/天</p>
                        <p><strong>食物来源：</strong>深绿色蔬菜(菠菜、西兰花)、豆类、柑橘类水果、全谷物</p>
                    </div>

                    <div class="article-section">
                        <h2 class="section-title">2. 铁</h2>
                        <p>
                            铁是血红蛋白的重要组成部分，负责将氧气输送到全身各个组织。充足的铁储备有助于预防怀孕后期可能出现的贫血风险，也对胎儿的大脑发育起着关键作用。
                        </p>
                        <p><strong>推荐摄入量：</strong>18毫克/天</p>
                        <p><strong>食物来源：</strong>瘦红肉、家禽、豆类、强化谷物、深绿色蔬菜</p>

                        <img
                            src="https://images.unsplash.com/photo-1611269154421-63dc70d10770?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80"
                            alt="富含铁的食物"
                            class="article-image"
                        />
                    </div>

                    <div class="article-section">
                        <h2 class="section-title">3. 钙</h2>
                        <p>
                            钙是构建骨骼和牙齿的基础，备孕期间充足的钙摄入可确保怀孕后胎儿能获得足够的钙质支持骨骼发育，同时也能保护准妈妈自身的骨密度。
                        </p>
                        <p><strong>推荐摄入量：</strong>1000毫克/天</p>
                        <p><strong>食物来源：</strong>奶制品、豆腐、深绿色蔬菜、强化食品</p>
                    </div>

                    <div class="article-section">
                        <h2 class="section-title">4. 维生素D</h2>
                        <p>
                            维生素D对钙的吸收利用至关重要，同时也参与免疫系统调节。充足的维生素D可降低妊娠期并发症的风险，包括妊娠糖尿病和先兆子痫。
                        </p>
                        <p><strong>推荐摄入量：</strong>600-800国际单位/天</p>
                        <p><strong>食物来源：</strong>鱼肝油、脂肪鱼类、蛋黄、强化牛奶</p>
                    </div>

                    <div class="article-section">
                        <h2 class="section-title">5. 锌</h2>
                        <p>
                            锌在细胞分裂、DNA合成和蛋白质生成中发挥重要作用，对排卵和受精过程至关重要。研究表明，锌缺乏可能导致胚胎发育异常。
                        </p>
                        <p><strong>推荐摄入量：</strong>8-11毫克/天</p>
                        <p><strong>食物来源：</strong>牡蛎、红肉、家禽、豆类、坚果</p>
                    </div>

                    <div class="article-section">
                        <h2 class="section-title">6. 欧米伽-3脂肪酸</h2>
                        <p>
                            欧米伽-3脂肪酸对胎儿大脑和视网膜发育至关重要。充足的摄入有助于延长妊娠时间，减少早产风险，同时也有助于调节生殖激素，改善卵子质量。
                        </p>
                        <p><strong>推荐摄入量：</strong>每周至少食用两次脂肪鱼</p>
                        <p><strong>食物来源：</strong>三文鱼、鲭鱼、沙丁鱼、亚麻籽、核桃</p>

                        <img
                            src="https://images.unsplash.com/photo-1519708227418-c8fd9a32b7a2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
                            alt="富含欧米伽-3的食物"
                            class="article-image"
                        />
                    </div>

                    <div class="article-section">
                        <h2 class="section-title">7. 维生素B12</h2>
                        <p>维生素B12对神经系统发育和红细胞形成起着重要作用。缺乏可能导致不孕、流产和胎儿神经管缺陷。</p>
                        <p><strong>推荐摄入量：</strong>2.4微克/天</p>
                        <p><strong>食物来源：</strong>肉类、禽类、鱼类、奶制品、鸡蛋</p>
                    </div>

                    <div class="article-section">
                        <h2 class="section-title">科学补充的建议</h2>
                        <p>
                            尽管均衡饮食是获取这些营养素的最佳途径，但备孕期间可能需要额外的补充剂支持。在选择营养补充剂时，请注意：
                        </p>
                        <ul class="list-disc pl-5 space-y-2 mt-2">
                            <li>选择专为备孕女性设计的复合维生素，通常包含适量的叶酸、铁、钙等。</li>
                            <li>单一营养素补充应在医生指导下进行，避免过量。</li>
                            <li>补充剂不能替代均衡饮食，应将其视为饮食的补充。</li>
                            <li>男性伴侣也应注意营养摄入，尤其是锌和维生素C，有助于提高精子质量。</li>
                        </ul>
                    </div>

                    <div class="article-section">
                        <h2 class="section-title">总结</h2>
                        <p>
                            备孕期的营养状况直接影响受孕几率和未来胎儿的健康。通过均衡饮食和必要的补充剂，确保摄入足量的关键营养素，为孕育健康宝宝奠定基础。建议在备孕前3-6个月开始调整饮食结构，并在医生指导下合理补充所需营养素。
                        </p>
                    </div>
                </div>

                <!-- 相关文章 -->
                <div class="related-articles">
                    <h3 class="related-title">相关推荐</h3>

                    <div class="related-card">
                        <img
                            src="https://images.unsplash.com/photo-1505576399279-565b52d4ac71?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
                            alt="相关文章图片"
                            class="related-image"
                        />
                        <div class="related-content">
                            <div class="text-xs bg-pink-100 text-pink-500 px-1 py-0.5 rounded inline-block mb-1">
                                饮食建议
                            </div>
                            <h4 class="text-sm font-medium">备孕期间应避免的食物和饮品</h4>
                            <div class="text-xs text-gray-400 mt-1">1,845人已读</div>
                        </div>
                    </div>

                    <div class="related-card">
                        <img
                            src="https://images.unsplash.com/photo-1598373182133-52452f7691ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
                            alt="相关文章图片"
                            class="related-image"
                        />
                        <div class="related-content">
                            <div class="text-xs bg-pink-100 text-pink-500 px-1 py-0.5 rounded inline-block mb-1">
                                健康提示
                            </div>
                            <h4 class="text-sm font-medium">维生素和矿物质摄入过量的风险</h4>
                            <div class="text-xs text-gray-400 mt-1">925人已读</div>
                        </div>
                    </div>

                    <div class="related-card">
                        <img
                            src="https://images.unsplash.com/photo-1604480133435-25b86862d276?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
                            alt="相关文章图片"
                            class="related-image"
                        />
                        <div class="related-content">
                            <div class="text-xs bg-pink-100 text-pink-500 px-1 py-0.5 rounded inline-block mb-1">
                                生活方式
                            </div>
                            <h4 class="text-sm font-medium">备孕期一周健康饮食计划</h4>
                            <div class="text-xs text-gray-400 mt-1">2,103人已读</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分享栏 -->
            <div class="share-bar">
                <div class="share-button">
                    <div class="share-icon bookmark-icon">
                        <i class="fas fa-bookmark"></i>
                    </div>
                    <span>收藏</span>
                </div>
                <div class="share-button">
                    <div class="share-icon">
                        <i class="fas fa-share-alt"></i>
                    </div>
                    <span>分享</span>
                </div>
                <div class="share-button">
                    <div class="share-icon">
                        <i class="fas fa-thumbs-up"></i>
                    </div>
                    <span>点赞</span>
                </div>
                <div class="share-button">
                    <div class="share-icon">
                        <i class="fas fa-comment"></i>
                    </div>
                    <span>评论</span>
                </div>
            </div>

            <!-- 底部导航栏 -->
            <div class="nav-bar">
                <div class="nav-item">
                    <i class="fas fa-home text-xl mb-1"></i>
                    <span>首页</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-notes-medical text-xl mb-1"></i>
                    <span>健康记录</span>
                </div>
                <div class="nav-item active">
                    <i class="fas fa-book-medical text-xl mb-1"></i>
                    <span>知识库</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user-friends text-xl mb-1"></i>
                    <span>伴侣空间</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user text-xl mb-1"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
    </body>
</html>
